<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>PatientFusion Sync</title>
    
    <style type="text/css">
        body
        {
        	font-family: Verdana, Arial, Helvetica;
        }
        
        #MainContent
        {
        	background: #FFF;
        	
        	-moz-border-radius: 10px;
            border-radius: 10px;
        }
        
        #Menu
        {
        	margin: 0px;
        	padding: 0px;
        	
        	list-style: none;
        }
        
        #Menu li
        {
        	width: 100%;
        	padding-top: 4px;
        	padding-bottom: 4px;
        	
        	color: #9CBAC8;
        	font-size: 24px;
        }
        
        #Menu li:hover
        {
        	color: #33AA33;
        	
        	background: #FAFAFA;
        	cursor: pointer;
        }
        
        #Menu li.selected
        {
        	color: #337733;        	
        	background: #DAE6F2;
        }
        
        #Menu li.selected:hover
        {
        	color: #337733;
        	background: #DDD;
        }
        
        #placeholder
        {
        	padding-left: 20px;
        }
        
        .centerContent
        {
        	width: 1000px;
        	
        	margin-left: auto;
        	margin-right: auto;
        }
        
        .alignRight
        {
        	text-align: right;
        }
        
        .alignLeft
        {
        	text-align: left;
        }
        
        .alignCenter
        {
        	text-align: center;
        }
        
        #UserInfo
        {
        	font-size: 1.2em;
        }
        
        #btnSync
        {
        	font-size: 1.2em;
        }
        
        #iSync
        {
        	width: 20px;
        	height: 20px;
        }
        
        #SyncStats
        {
        	width: 100%;
        }
        
        #SyncStats tr:first-child, .recordHeader
        {
        	color: #BEDCEA;
        	font-size: 1.4em;
        }
        
        #SyncStats .syncRecord td
        {
        	margin-bottom: 4px;
        	border-bottom: 1px dotted #DDD;
        }
        
        #SyncStats tr:last-child td
        {
        	border: 0px;
        }
        
        #SyncStats .syncDate
        {
        	font-size: 1.3em;
        }
        
        #SyncStats .syncStats
        {
        	color: #999;
        	font-size: 1.1em;
        }
    </style>
    <script language="javascript" type="text/javascript" src="./js/flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="./js/excanvas.js"></script>
    <script language="javascript" type="text/javascript" src="./js/flot/jquery.flot.js"></script>
    <script type="text/javascript" src="../js/jquery-jtemplates.js"></script>
    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->

</head>
<body style="background: #BEDCEA;">
    <div class="centerContent" style="width: 980px; margin-top: 15px;">
        <table style="width: 100%;">
            <tr>
                <td>
                    <img src="images/patientfusionsync.png" alt="PatientFusion Sync" title="PatientFusion Sync" />
                </td>
                
                <td class="alignRight">
                    <h2>HealthVault & Patient Fusion</h2>
                </td>
            </tr>
        </table>
    </div>
    
    <div id="MainContent" class="centerContent" style="padding-top: 15px;">
        <table style="width: 100%;" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width: 600px;">
                    <div id="placeholder" style="width:600px; height:300px;"></div>
                </td>
                
                <td style="padding-top: 15px;" valign="top">
                    <ul id="Menu">
                        <li class="graph"><div id="HeightGraph">Height</div></li>
                        <li class="graph selected"><div id="WeightGraph">Weight</div></li>
                        <li class="graph"><div id="BPGraph">Blood Pressure</div></li>
                        <li class="graph"><div id="HRGraph">Heart Rate (bpm)</div></li>
                    </ul>
                </td>
            </tr>
        </table>
        
        <div style="margin: 15px 15px 25px 15px; width: 100%; overflow: auto;">
            <div style="float: left; width: 350px; margin-right: 50px;">
                <div class="recordHeader">Selected Record</div>
                <asp:Label ID="UserInfo" style="display: inline;" runat="server"></asp:Label>
                <div style="width: 100%;" class="alignCenter">
                    <input type="button" id="btnSync" value="Sync Now" /> <img src="images/indicator.gif" id="iSync" style="visibility: hidden" />
                    <div id="lblMessage"></div>
                </div>
            </div>
            
            <div style="float: left; width: 570px;" id="syncHistoryDiv"></div>
        </div>
    </div>
    
    <div class="centerContent alignCenter">
        <a href="http://account.healthvault-ppe.com">HealthVault Account</a> -
        <a href="http://pfapi.com/phr">PatientFusion Account</a>
    </div>
    
<script id="source">
    $(document).ready(function() {

        // Add selected class to graph label that was clicked
        $(".graph").click(function() {

            // Remove selected class from all labels
            $(".graph").each(function(i) {
                var item = $(this);
                item.removeClass("selected");
            });

            // Add selected class to current item
            $(this).addClass("selected");
        });

        $.getJSON('PFSync/GetSyncHistory', function(d) {
            $("#syncHistoryDiv").setTemplateElement("template");
            $("#syncHistoryDiv").processTemplate(d);
        });

        $.getJSON('PFSync/GetUser', function(data) {
            $("#lblUserName").html(data.Name);
            $("#lblUserRecordIdHV").html(data.RecordIdHV);
        });

        $("#btnSync").click(function() {
            this.value = 'Syncing now...';
            $("#btnSync").attr('disabled', 'disabled');

            $("#iSync").css('visibility', 'visible');

            $.getJSON('PFSync/SyncHVandPF', function(d) {
                $("#lblMessage").html(d);
                $("#btnSync").val("Sync Now");
                $("#btnSync").removeAttr('disabled');
                $("#iSync").css('visibility', 'hidden');

                $.getJSON('PFSync/GetSyncHistory', function(d) {
                    $("#syncHistoryDiv").setTemplateElement("template");
                    $("#syncHistoryDiv").processTemplate(d);
                });
            });
        });

        $.getJSON('PFSync/GetGraphWeights', function(data) {
            plot([data])
        });

        $("#HeightGraph").click(function() {
            $.getJSON('PFSync/GetGraphHeights', function(d) {
                plot([d], { color: '#00FF00' });
            });
        });
        $("#WeightGraph").click(function() {
            $.getJSON('PFSync/GetGraphWeights', function(data) {
                plot([data])
            });
        });

        var systolic = null;
        var diastolic = null;
        $("#BPGraph").click(function() {
            $.getJSON('PFSync/GetGraphBPSystolic', function(data) {
                systolic = data;
                graphBP();
            });
            $.getJSON('PFSync/GetGraphBPDiastolic', function(data) {
                diastolic = data;
                graphBP();
            });
        });
        $("#HRGraph").click(function() {
            $.getJSON('PFSync/GetGraphBPHeartRate', function(data) {
                plot([data])
            });
        });
        function graphBP() {
            if (systolic != null && diastolic != null) {
                plot([diastolic, systolic]);
            }
        }
        function plot(d) {
            $.plot($("#placeholder"), d, { xaxis: { mode: "time" }, points: { show: true, radius: 3 }, lines: { show: true} });
        }
    });
</script>

<textarea id="template" style="display: none; width: 100%;">                 
    <table id="SyncStats" cellpadding="0" cellspacing="0">
        <tr>
            <td>Sync Date</td>
            <td class="alignCenter">Stats</td>
        </tr>

    {#foreach $T as record}
        <tr class="syncRecord">
            <td class="syncDate">
                {$T.record.SyncTimeString}
            </td>
            <td class="syncStats alignRight">
                {$T.record.SyncItemsHV} HV<br />
                {$T.record.SyncItemsPF} PF
            </td>
        </tr>
    {#/for}
    </table>
</textarea>

</body>
</html>